<template>
  <el-dialog
    :title="$t('m.CONFIGURATION_OPTIONS')"
    custom-class="config-option-dialog"
    :close-on-click-modal="false"
    :modal="false"
    :visible.sync="open"
    :before-close="handleClose"
  >
    <el-tabs v-model="activeName" @tab-click="handleClickTab">
      <el-tab-pane :label="$t('m.GENERAL')" name="Common">
        <Common ref="Common" @close="handleClose"></Common>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('m.SOFT_PHONE1_CONFIG')"
        v-if="operator && operator.mainTel"
        name="webrtcMainTel"
      >
        <web-rtc
          ref="webrtcMainTel"
          @close="handleClose"
          v-if="activeName === 'webrtcMainTel'"
          :operator="operator"
          :telType="operator.mainTelType"
          telProp="mainTel"
        ></web-rtc>
      </el-tab-pane>
      <el-tab-pane
        :label="$t('m.SOFT_PHONE2_CONFIG')"
        v-if="operator && operator.viceTel"
        name="webrtcViceTel"
      >
        <web-rtc
          ref="webrtcViceTel"
          @close="handleClose"
          v-if="activeName == 'webrtcViceTel'"
          :operator="operator"
          :telType="operator.viceTelType"
          telProp="viceTel"
        ></web-rtc>
      </el-tab-pane>
      <!-- <el-tab-pane :label="$t('m.SHORTCUT_KEYS')" name="shortCutKey">
        <short-cut-key ref="shortCutKey" @close="handleClose"></short-cut-key>
      </el-tab-pane>-->
      <!-- <el-tab-pane label="  呼叫设置  " name="callSetup">
        <call-setup></call-setup>
      </el-tab-pane>-->
      <!-- <el-tab-pane label="告警账号配置" name="warningSet" v-if="isWarning">
        <warning-set ref="warningSet"></warning-set>
      </el-tab-pane>-->
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleSubmit(activeName)" size="small">{{$t('m.SAVE')}}</el-button>
      <el-button @click="handleClose" size="small">{{$t('m.CANCEL')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import WebRtc from './WebRtc'
import CallSetup from './CallSetup'
import WarningSet from './WarningSet'
import Common from './Common'
import ShortCutKey from './ShortCutKey'
export default {
  props: {
    open: Boolean,
  },
  components: {
    WebRtc,
    CallSetup,
    WarningSet,
    Common,
    ShortCutKey,
  },
  data() {
    return {
      activeName: 'Common', // 激活标签
      operator: undefined, // 操作员信息
      isWarning: false, //告警管理标识
    }
  },
  methods: {
    // 点击标签
    handleClickTab(tab) {
      console.log(tab.name)
      switch (tab.name) {
        case 'webrtcMainTel':
          break
      }
    },
    //保存
    handleSubmit(activeName) {
      this.$refs[activeName].handleSubmit()
    },
    // 关闭或取消
    handleClose() {
      console.log('handleClose')
      this.$emit('update:open', false)
    },
    // 初始化
    operatorQuery() {
      SDK.operatorquery()
        .then((res) => {
          this.operator = res.eventdata
        })
        .catch((err) => {
          console.log('获取操作员信息失败')
        })
    },
    //判断菜单是否有告警管理
    handleIsWarning() {
      const menulist = JSON.parse(sessionStorage.getItem('menuList'))
      menulist.forEach((e) => {
        if (e.LoadPath == '/warning') {
          this.isWarning = true
        }
      })
    },
    init() {
      this.operatorQuery()
      // this.handleIsWarning()
    },
  },
  mounted() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
/deep/.config-option-dialog {
  // width: 900px;
  height: 70%;
  background-color: #1a4969;
  opacity: 0.97;
  .el-dialog__header {
    padding: 10px 20px;
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 0px 20px;
    height: calc(100% - 96px);
    .el-tabs {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 45px);
      }
      .el-tab-pane {
        height: 100%;
      }
    }
    .el-tabs__item {
      color: #fff;
      font-size: 10px;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      &.is-active {
        color: #409eff;
      }
    }
  }
  .el-dialog__footer {
    padding: 10px 30px;
    .el-button {
      width: 70px;
      background-color: #1a4969;
      color: #ffffff;
      &:hover {
        background-color: #409eff;
      }
    }
  }
}
</style>